--- 
layout: default 
---

<style>
.spinner {
    transition: display .4s ease;
    height: 40px;
    filter:blur(0px)!important;
    opacity: 1!important;
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 45%;
}
.spinner > div {
    background-color: #fff;
    height: 100%;
    width: 6px;
    display: inline-block;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4); }  
  20% { transform: scaleY(1.0); }
}
.spinner .rect2 {  animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1.0s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }

</style>

<body>
    <div class="spinner">
        <div></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
    <div class="layout" style="opacity:0;">

        <div class="plane content">
            <div id="fullpage">
                {% for p in site.data.pages %}
                {% for post in site.posts %}
                {% if p.id == post.kid %}
                <div class="section">{{post.content}}</div>
                {% endif %}
                {% endfor %}
                {% endfor %}
            </div>
        </div>
        <div class="plane sidebar">
            <div class="sidebar-content">
                <header style="background-image: url('{{site.logo}}')">
                    <a href="{{site.baseurl}}/">HI {{site.title}}</a>
                </header>
                <div class="menu">
                    <ul id="test">
                        <li class="li-active">
                            <a href="#">Contents</a>
                        </li>
                        {% for p in site.data.pages %} {% if site.data.pages[0].id == p.id %}
                        <li class="li-active">
                            <a href="#{{p.id}}">{{p.name}}</a>
                        </li>
                        {% else %}
                        <li>
                            <a href="#{{p.id}}">{{p.name}}</a>
                        </li>
                        {% endif %} {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    window.onload = function(){
        setTimeout(function(){
            $(".layout").css("opacity","1");
            $(".spinner").hide();
        },600);
    }
    function removeActiveClass(node) {
        node.className = '';
    }

    document.querySelector('ul[id=test]').onclick = function (e) {
        document.querySelectorAll('ul[id=test] > li').forEach(function (e, i) {
            if (i != 0) {
                removeActiveClass(e);
            }
        })
        e.target.parentNode.className = 'li-active';
    }
    $(document).ready(function () {
        $('#fullpage').fullpage({
            anchors: [{% for p in site.data.pages %}'{{p.id}}', {% endfor %}],

        afterLoad: function (anchorLink, index) {
            var loadedSection = $(this);
            var activeList = $("[href='#" + anchorLink + "']");
            document.querySelectorAll('ul[id=test] > li').forEach(function (e, i) {
                if (i != 0) {
                    removeActiveClass(e);
                }
            })
            activeList.parent("li").addClass("li-active");
        }
        });
    });
</script>